<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            float: left;
            margin-left: 50px;
        }
        .right{
            float: right;
            margin-top: 15px;
        }
        a{
            text-decoration: none;
            color: gray;
            font-size: 1px ;
        }
        a:hover{
            color: red;
        }
        .bottom{
            height:770px;
            width: 100%;
            background: url("../image/4.jpg")   ;
            margin-left: 1px;
            background-repeat: no-repeat;
            background-size:cover ;
            padding-top: 30px;

        }
        .content{
            width: 400px;
            height: 400px;
            background: white;
            margin-left: 850px;
            margin-top: 200px;
            text-align: center;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="top">
        <img src="../image/3.jpg" style="width: 150px; height: 55px">
    </div>
    <div class="right">
        <a href="#">企业邮箱&nbsp;&nbsp;</a>
        <a href="#">VIP邮箱&nbsp;&nbsp;</a>
        <a href="#">邮箱会员&nbsp;&nbsp;</a>
        <a href="#">海外用户登录&nbsp;&nbsp;</a>
        <a href="#">官方App&nbsp;&nbsp;</a>
        <span style="font-size: 1px; color: gray">|&nbsp;&nbsp;</span>
        <a href="#">帮助&nbsp;&nbsp;</a>
        <a href="#">登录反馈</a>
    </div>
    <div class="bottom" style="clear: both">
        <div class="content">
        <form method="get" action="#" autocomplete="off">
            <div>注册详情</div>
            <hr/>
            <div>
                <label for="username">姓名</label>
                <input type="text" name="username" id="username" placeholder="请输入用户名">
            </div>
            <div>
                <label for="pwd">密码</label>
                <input type="password" name="pwd" id="pwd" placeholder="请输入密码名">
            </div>
            <div>
                <label for="email">邮箱</label>
                <input type="email" name="email" id="email" placeholder="请输入邮箱">
            </div>
            <div>
                <label for="tel">手机</label>
                <input type="tel" name="tel" id="tel" placeholder="请输入手机号">
            </div>
            <hr/>
            <div>
                <label for="gender">性别:</label>
                <input type="radio" name="gender" value="man" id="gender" >男&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gender" value="女" >女&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gender" value="其他" >其他
            </div>
            <div>
                <label for="hobby">爱好:</label>
                <input type="checkbox" name="hobby" value="music" id="hobby" >音乐
                <input type="checkbox" name="hobby" value="movie" >电影
                <input type="checkbox" name="hobby" value="game" >游戏
            </div>
            <div>
                <label for="birthday">出生日期:</label>
                <input type="date" name="birthday" id="birthday" >
            </div>
            <div>
                <label >所在城市:</label>
                <select>
                    <option>--请选择所在的城市--</option>
                    <optgroup label="直辖市">
                        <option>北京</option>
                        <option>上海</option>
                    </optgroup>
                    <optgroup label="省会">
                        <option>武汉</option>
                        <option>郑州</option>
                    </optgroup>
                </select>
            </div>
            <hr/>
            <div>
                <label style="vertical-align: top">个性签名</label>
                <textarea placeholder="请写下你的与众不同" rows="5" cols="40"></textarea>
            </div>
            <hr/>
            <div>
                <button type="submit">提交</button>
                <button type="reset">重置</button>
            </div>
        </form>
    </div>
    </div>
</body>
</html>